<template>
  <quill-editor
    :options="editorOptions"
    contentType="html"
    ref="qeditor"
    @textChange="textChange"
  ></quill-editor>
</template>

<script lang="ts" setup>
import type { Ref } from 'vue'
import { QuillEditor } from '@vueup/vue-quill'
import 'quill/dist/quill.core.css'
import '@vueup/vue-quill/dist/vue-quill.snow.css'
import { ref, defineEmits } from 'vue'

const emit = defineEmits(['update:modelValue'])
const qeditor: Ref<InstanceType<typeof QuillEditor> | null> = ref(null)

const textChange = () => {
  if (qeditor.value) {
    const editHTML = qeditor.value.getHTML() // 获取 Quill 实例的 HTML 内容
    emit('update:modelValue', editHTML) // 发出事件更新父组件
  }
}

const editorOptions = {
  theme: 'snow',
  modules: {
    toolbar: [
      [{ header: [1, 2, 3, false] }],
      ['bold', 'italic', 'underline'],
      [{ list: 'ordered' }, { list: 'bullet' }],
      ['link', 'image'],
      ['clean'],
    ],
  },
}
</script>

<script lang="ts">
export default {
  name: 'QuillEditor',
}
</script>

<style lang="less" scoped>
.quill-editor {
  height: 200px; /* 编辑器高度 */
}
</style>
